<script setup>
import {
  ref,
  getCurrentInstance,
  reactive,
  onMounted,
  computed,
  watch,
  onUnmounted,
} from "vue";
import * as echarts from "echarts";
import _ from "lodash";
import api from "@/api";
import moment from "moment";
import { currentWeek, sortDate } from "@/utils/common";

const { proxy } = getCurrentInstance();

const props = defineProps({
  isFullScreen: {
    default: false,
  },
});

//模块显示选择
const defaultProps = {
  children: "children",
  label: "label",
};

//模块选择
let dateArr = reactive([]);
//安全模块数据
let safeModuleData = reactive({
  score: 100,
  safeScore: 1.6,
  reason: "东门闸机通道",
  safePeriod: "week",
  safePeriodList: [
    {
      value: "week",
      label: "本周",
    },
  ],
  trendData: [85, 92, 73, 94, 87, 95, 51],
  trendType: "line",
  accidentData: [
    {
      deviceId: 0,
      deviceName: "",
      lowRiskLevelCount: 4,
      highRiskLevelCount: 1,
    },
    {
      deviceId: 1,
      deviceName: "",
      lowRiskLevelCount: 2,
      highRiskLevelCount: 3,
    },
    {
      deviceId: 2,
      deviceName: "",
      lowRiskLevelCount: 4,
      highRiskLevelCount: 5,
    },
    {
      deviceId: 3,
      deviceName: "",
      lowRiskLevelCount: 4,
      highRiskLevelCount: 3,
    },
    {
      deviceId: 4,
      deviceName: "",
      lowRiskLevelCount: 1,
      highRiskLevelCount: 1,
    },
  ],
  accidentType: "pie",
  isAccidentTypePie: true,
  videoData: [
    {
      date: "2023-05-30",
      lowRiskLevelCount: 4,
      highRiskLevelCount: 1,
    },
    {
      date: "2023-05-31",
      lowRiskLevelCount: 0,
      highRiskLevelCount: 0,
    },
    {
      date: "2023-06-01",
      lowRiskLevelCount: 3,
      highRiskLevelCount: 1,
    },
    {
      date: "2023-06-02",
      lowRiskLevelCount: 2,
      highRiskLevelCount: 0,
    },
    {
      date: "2023-06-03",
      lowRiskLevelCount: 3,
      highRiskLevelCount: 1,
    },
    {
      date: "2023-06-04",
      lowRiskLevelCount: 0,
      highRiskLevelCount: 0,
    },
    {
      date: "2023-06-05",
      lowRiskLevelCount: 0,
      highRiskLevelCount: 0,
    },
  ],
  videoType: "bar",
  isVideoTypePie: false,
  safeTree: [
    {
      id: "sm",
      label: "安全模块",
      children: [
        {
          id: "s1",
          label: "事件发生数",
        },
        {
          id: "s2",
          label: "指数趋势",
        },
        {
          id: "s3",
          label: "摄像头事件",
        },
      ],
    },
  ],
  safeShow: {
    s1Show: true,
    s2Show: true,
    s3Show: true,
  },
});
//进度模块数据
let progressModuleData = reactive({
  score: 99,
  safeScore: 1.6,
  reason: "东门闸机通道",
  progressPeriod: "week",
  progressPeriodList: [
    {
      value: "week",
      label: "本周",
    },
  ],
  progressData: [85, 92, 73, 94, 87, 95, 51],
  progressType: "line",
  toatlFloor: 14,
  tableData: [
    {
      deviceId: 1,
      floorStatus: [0, 0, 2, 0, 1, 0, 3, 3, 3, 3, 3, 3, 3, 3],
    },
    {
      deviceId: 2,
      floorStatus: [3, 3, 3, 3, 3, 3, 3],
    },
    {
      deviceId: 3,
      floorStatus: [3, 3, 3, 3, 3, 3, 3],
    },
    {
      deviceId: 4,
      floorStatus: [3, 3, 3, 3, 3, 3, 3],
    },
    {
      deviceId: 5,
      floorStatus: [3, 3, 3, 3, 3, 3, 3],
    },
    {
      deviceId: 6,
      floorStatus: [3, 3, 3, 3, 3, 3, 3],
    },
    {
      deviceId: 7,
      floorStatus: [3, 3, 3, 3, 3, 3, 3],
    },
  ],
  accidentData: [
    {
      date: "2023-05-30",
      floorFinish: 0,
      floorOverdue: 0,
      floorseriouslyOverdue: 0,
    },
    {
      date: "2023-05-31",
      floorFinish: 0,
      floorOverdue: 0,
      floorseriouslyOverdue: 0,
    },
    {
      date: "2023-06-01",
      floorFinish: 0,
      floorOverdue: 0,
      floorseriouslyOverdue: 0,
    },
    {
      date: "2023-06-02",
      floorFinish: 0,
      floorOverdue: 0,
      floorseriouslyOverdue: 0,
    },
    {
      date: "2023-06-03",
      floorFinish: 0,
      floorOverdue: 0,
      floorseriouslyOverdue: 0,
    },
    {
      date: "2023-06-04",
      floorFinish: 0,
      floorOverdue: 0,
      floorseriouslyOverdue: 0,
    },
    {
      date: "2023-06-05",
      floorFinish: 0,
      floorOverdue: 0,
      floorseriouslyOverdue: 0,
    },
  ],
  accidentType: "bar",
  progressTree: [
    {
      id: "pm",
      label: "进度模块",
      children: [
        {
          id: "p1",
          label: "指数趋势",
        },
        {
          id: "p2",
          label: "进度一览",
        },
        {
          id: "p3",
          label: "工程最新进度",
        },
      ],
    },
  ],
  progressShow: {
    p1Show: true,
    p2Show: true,
    p3Show: true,
  },
});
//环境模块数据
let environmentModuleData = reactive({
  score: 100,
  safeScore: 1.6,
  reason: "东门闸机通道",
  environmentPeriod: "week",
  environmentPeriodList: [
    {
      value: "week",
      label: "本周",
    },
  ],
  trendData: [85, 92, 73, 94, 87, 95, 51],
  trendType: "line",
  accidentData: [
    { deviceId: 0, deviceName: "", dailyMarkDeductionCount: 0 },
    { deviceId: 1, deviceName: "", dailyMarkDeductionCount: 0 },
    { deviceId: 2, deviceName: "", dailyMarkDeductionCount: 4 },
    { deviceId: 3, deviceName: "", dailyMarkDeductionCount: 0 },
    { deviceId: 4, deviceName: "", dailyMarkDeductionCount: 1 },
  ],
  videoData: [
    {
      date: "2023-05-30",
      workingArea: 0,
      mainChannel: 0,
      rubbishDump: 0,
      material: 0,
    },
    {
      date: "2023-05-31",
      workingArea: 0,
      mainChannel: 0,
      rubbishDump: 0,
      material: 0,
    },
    {
      date: "2023-06-01",
      workingArea: 0,
      mainChannel: 0,
      rubbishDump: 0,
      material: 0,
    },
    {
      date: "2023-06-02",
      workingArea: 2,
      mainChannel: 4,
      rubbishDump: 0,
      material: 0,
    },
    {
      date: "2023-06-03",
      workingArea: 2,
      mainChannel: 4,
      rubbishDump: 0,
      material: 0,
    },
    {
      date: "2023-06-04",
      workingArea: 4,
      mainChannel: 12,
      rubbishDump: 0,
      material: 2,
    },
    {
      date: "2023-06-05",
      workingArea: 0,
      mainChannel: 0,
      rubbishDump: 0,
      material: 0,
    },
  ],
  videoType: "bar",
  environmentTree: [
    {
      id: "em",
      label: "环境模块",
      children: [
        {
          id: "e1",
          label: "指数趋势",
        },
        {
          id: "e2",
          label: "违规分布",
        },
        {
          id: "e3",
          label: "事件类型分布",
        },
      ],
    },
  ],
  environmentShow: {
    e1Show: true,
    e2Show: true,
    e3Show: true,
  },
});

const safeModuleShow = computed(
  () =>
    safeModuleData.safeShow.s1Show ||
    safeModuleData.safeShow.s2Show ||
    safeModuleData.safeShow.s3Show
);
const progressModuleShow = computed(
  () =>
    progressModuleData.progressShow.p1Show ||
    progressModuleData.progressShow.p2Show ||
    progressModuleData.progressShow.p3Show
);
const environmentModuleShow = computed(
  () =>
    environmentModuleData.environmentShow.e1Show ||
    environmentModuleData.environmentShow.e2Show ||
    environmentModuleData.environmentShow.e3Show
);

//树形事件
function handleSafeCheck(self, all) {
  let selectedKeys = all.checkedKeys;
  let curId = self.id;
  switch (curId) {
    case "sm":
      if (_.indexOf(selectedKeys, curId) >= 0) {
        safeModuleData.safeShow.s1Show = true;
        safeModuleData.safeShow.s2Show = true;
        safeModuleData.safeShow.s3Show = true;
      } else {
        safeModuleData.safeShow.s1Show = false;
        safeModuleData.safeShow.s2Show = false;
        safeModuleData.safeShow.s3Show = false;
      }
      break;
    case "s1":
      if (_.indexOf(selectedKeys, curId) >= 0) {
        safeModuleData.safeShow.s1Show = true;
      } else {
        safeModuleData.safeShow.s1Show = false;
      }
      break;
    case "s2":
      if (_.indexOf(selectedKeys, curId) >= 0) {
        safeModuleData.safeShow.s2Show = true;
      } else {
        safeModuleData.safeShow.s2Show = false;
      }
      break;
    case "s3":
      if (_.indexOf(selectedKeys, curId) >= 0) {
        safeModuleData.safeShow.s3Show = true;
      } else {
        safeModuleData.safeShow.s3Show = false;
      }
      break;
  }
}
function handleProgressCheck(self, all) {
  let selectedKeys = all.checkedKeys;
  let curId = self.id;
  switch (curId) {
    case "pm":
      if (_.indexOf(selectedKeys, curId) >= 0) {
        progressModuleData.progressShow.p1Show = true;
        progressModuleData.progressShow.p2Show = true;
        progressModuleData.progressShow.p3Show = true;
      } else {
        progressModuleData.progressShow.p1Show = false;
        progressModuleData.progressShow.p2Show = false;
        progressModuleData.progressShow.p3Show = false;
      }
      break;
    case "p1":
      if (_.indexOf(selectedKeys, curId) >= 0) {
        progressModuleData.progressShow.p1Show = true;
      } else {
        progressModuleData.progressShow.p1Show = false;
      }
      break;
    case "p2":
      if (_.indexOf(selectedKeys, curId) >= 0) {
        progressModuleData.progressShow.p2Show = true;
      } else {
        progressModuleData.progressShow.p2Show = false;
      }
      break;
    case "p3":
      if (_.indexOf(selectedKeys, curId) >= 0) {
        progressModuleData.progressShow.p3Show = true;
      } else {
        progressModuleData.progressShow.p3Show = false;
      }
      break;
  }
}
function handleEnvironmentCheck(self, all) {
  let selectedKeys = all.checkedKeys;
  let curId = self.id;
  switch (curId) {
    case "em":
      if (_.indexOf(selectedKeys, curId) >= 0) {
        environmentModuleData.environmentShow.e1Show = true;
        environmentModuleData.environmentShow.e2Show = true;
        environmentModuleData.environmentShow.e3Show = true;
      } else {
        environmentModuleData.environmentShow.e1Show = false;
        environmentModuleData.environmentShow.e2Show = false;
        environmentModuleData.environmentShow.e3Show = false;
      }
      break;
    case "e1":
      if (_.indexOf(selectedKeys, curId) >= 0) {
        environmentModuleData.environmentShow.e1Show = true;
      } else {
        environmentModuleData.environmentShow.e1Show = false;
      }
      break;
    case "e2":
      if (_.indexOf(selectedKeys, curId) >= 0) {
        environmentModuleData.environmentShow.e2Show = true;
      } else {
        environmentModuleData.environmentShow.e2Show = false;
      }
      break;
    case "e3":
      if (_.indexOf(selectedKeys, curId) >= 0) {
        environmentModuleData.environmentShow.e3Show = true;
      } else {
        environmentModuleData.environmentShow.e3Show = false;
      }
      break;
  }
}

//事件趋势指数
let safeTrendChart = null;
function initSafeTrendChart(type) {
  let safeTrendDom = document.getElementById("safeTrendIndex");
  safeTrendChart = echarts.init(safeTrendDom);
  safeTrendChart.clear();
  let option = null;
  if (type == "bar") {
    option = {
      color: ["#FFD700"],
      grid: {
        x: 40,
        y: 40,
        x2: 20,
        y2: 25,
      },
      tooltip: {
        trigger: "axis",
        // formatter(params) {
        //     // 返回值就是html代码可以使用标签
        //     return `
        //         时刻：${params.data.title} </br>
        //         分数：${params.data.value}
        //     `;
        // },
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
        },
      },
      xAxis: {
        type: "category",
        //data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        data: dateArr,
        axisLabel: {
          interval: 0,
          // rotate: 45,
          color: "#000",
        },
        axisTick: {
          show: false, //不显示坐标轴刻度线
        },
        axisLine: {
          show: true, //不显示坐标轴线
          lineStyle: {
            color: "#939393 ",
          },
        },
      },
      yAxis: {
        type: "value",
        name: "单位：分",
        //nameRotate: '90',
        nameLocation: "end",
        nameTextStyle: {
          // fontSize: 14,
          padding: [0, 0, 0, -10],
        },
        axisTick: {
          show: false, //不显示坐标轴刻度线
        },
        axisLine: {
          show: true, //不显示坐标轴线
        },
        splitLine: {
          //网格线
          show: true,
        },
      },
      series: [
        {
          name: "评分",
          data: safeModuleData.trendData,
          type: "bar",
          barWidth: 25,
          // barGap:'90%'
          itemStyle: {
            // 使用方法二的写法
            color: {
              type: "linear",
              x: 0, //右
              y: 0, //下
              x2: 0, //左
              y2: 1, //上
              colorStops: [
                {
                  offset: 0,
                  color: "#749FFA", // 0% 处的颜色
                },
                // {
                //     offset: 0.7,
                //     color: '#2378f7' // 70% 处的颜色
                // },
                {
                  offset: 1,
                  color: "#3F7ED2", // 100% 处的颜色
                },
              ],
            },
          },
        },
      ],
    };
  } else {
    option = {
      color: ["#FFD700"],
      grid: {
        x: 40,
        y: 40,
        x2: 20,
        y2: 25,
      },
      tooltip: {
        trigger: "axis",
        // formatter(params) {
        //     // 返回值就是html代码可以使用标签
        //     return `
        //         时刻：${params.data.title} </br>
        //         分数：${params.data.value}
        //     `;
        // },
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
        },
      },
      xAxis: {
        type: "category",
        data: dateArr,
        axisLabel: {
          interval: 0,
          color: "#000",
        },
        axisTick: {
          show: false, //不显示坐标轴刻度线
        },
        axisLine: {
          show: true, //不显示坐标轴线
          lineStyle: {
            color: "#8E8E8E ",
          },
        },
      },
      yAxis: {
        type: "value",
        name: "单位：分",
        //nameRotate: '90',
        nameLocation: "end",
        nameTextStyle: {
          // fontSize: 14,
          padding: [0, 0, 0, -10],
        },
        axisTick: {
          show: false, //不显示坐标轴刻度线
        },
        axisLine: {
          show: true, //不显示坐标轴线
        },
        splitLine: {
          //网格线
          show: true,
        },
      },
      series: [
        {
          name: "评分",
          data: safeModuleData.trendData,
          type: "line",
          itemStyle: {
            color: {
              type: "linear",
              x: 0, //右
              y: 0, //下
              x2: 0, //左
              y2: 1, //上
              colorStops: [
                {
                  offset: 0,
                  color: "#749FFA", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#3F7ED2", // 100% 处的颜色
                },
              ],
            },
          },
        },
      ],
    };
  }
  option && safeTrendChart.setOption(option);
}

//事件发生数
let safeAccidentChart = null;
function initSafeAccidentChart(type) {
  let chartDom = document.getElementById("safeAccidentIndex");
  safeAccidentChart = echarts.init(chartDom);
  safeAccidentChart.clear();
  let option;
  if (type == "bar") {
    let safeAccH = [];
    let safeAccL = [];
    let deviceNames = [];
    safeModuleData.accidentData.forEach((item) => {
      deviceNames.push(getSafeNameByType(item.algorithmType));
      safeAccH.push(item.highRiskLevelCount);
      safeAccL.push(item.lowRiskLevelCount);
    });
    option = {
      color: ["#FFD700"],
      legend: {
        itemWidth: 10, // 标志图形的长度
        itemHeight: 10, // 标志图形的宽度
      },
      grid: {
        x: 40,
        y: 40,
        x2: 20,
        y2: 25,
      },
      tooltip: {
        trigger: "axis",
        // formatter(params) {
        //     // 返回值就是html代码可以使用标签
        //     return `
        //         时刻：${params.data.title} </br>
        //         分数：${params.data.value}
        //     `;
        // },
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
        },
      },
      xAxis: {
        type: "category",
        data: deviceNames,
        axisLabel: {
          interval: 0,
          // rotate: 45,
          color: "#000",
        },
        axisTick: {
          show: false, //不显示坐标轴刻度线
        },
        axisLine: {
          show: true, //不显示坐标轴线
          lineStyle: {
            color: "#939393 ",
          },
        },
      },
      yAxis: {
        type: "value",
        name: "单位：件",
        //nameRotate: '90',
        nameLocation: "end",
        nameTextStyle: {
          // fontSize: 14,
          padding: [0, 0, 0, -10],
        },
        axisTick: {
          show: false, //不显示坐标轴刻度线
        },
        axisLine: {
          show: true, //不显示坐标轴线
        },
        splitLine: {
          //网格线
          show: true,
        },
      },
      series: [
        {
          name: "高危",
          data: safeAccH,
          type: "bar",
          stack: "safe",
          barWidth: 25,
          // barGap:'90%'
          itemStyle: {
            // 使用方法二的写法
            //color: '#fc532a',
            color: {
              type: "linear",
              x: 0, //右
              y: 0, //下
              x2: 0, //左
              y2: 1, //上
              colorStops: [
                {
                  offset: 0,
                  color: "#E83D17", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#F83C12", // 100% 处的颜色
                },
              ],
            },
          },
        },
        {
          name: "低危",
          data: safeAccL,
          type: "bar",
          stack: "safe",
          barWidth: 25,
          // barGap:'90%'
          itemStyle: {
            // 使用方法二的写法
            //color: '#16aff9',
            color: {
              type: "linear",
              x: 0, //右
              y: 0, //下
              x2: 0, //左
              y2: 1, //上
              colorStops: [
                {
                  offset: 0,
                  color: "#16BAFF", // 0% 处的颜色
                },
                // {
                //     offset: 0.7,
                //     color: '#2378f7' // 70% 处的颜色
                // },
                {
                  offset: 1,
                  color: "#1457C7", // 100% 处的颜色
                },
              ],
            },
          },
        },
      ],
    };
  } else {
    let treated = [];
    let legendData = [];
    safeModuleData.accidentData.forEach((item) => {
      treated.push({
        // name: getDeviceNameById(item.deviceId),
        // value: item.lowRiskLevelCount + item.highRiskLevelCount
        name: getSafeNameByType(item.algorithmType),
        value: item.highRiskLevelCount + item.lowRiskLevelCount,
      });
      legendData.push({
        //name: getDeviceNameById(item.deviceId),
        name: getSafeNameByType(item.algorithmType),
      });
    });
    let total = 0;
    for (let i = 0; i < treated.length; i++) {
      total += treated[i].value;
    }

    option = {
      tooltip: {
        trigger: "item",
        formatter: function (params) {
          // ${params.marker}低危: <span>${safeModuleData.accidentData[params.dataIndex].lowRiskLevelCount}件</span><br>
          //     ${params.marker}高危: <span>${safeModuleData.accidentData[params.dataIndex].highRiskLevelCount}件</span><br>
          return `<div>${params.name}<br>
                    ${params.marker}${params.seriesName}：<span>${
            params.value
          }件</span><br>
                    ${params.marker}低危: <span>${
            safeModuleData.accidentData[params.dataIndex].lowRiskLevelCount
          }件</span><br>
                    ${params.marker}高危: <span>${
            safeModuleData.accidentData[params.dataIndex].highRiskLevelCount
          }件</span><br>
                    </div>`;
        },
      },
      legend: {
        data: legendData,
        orient: "horizontal",
        bottom: "5px",
        itemWidth: 10, // 标志图形的长度
        itemHeight: 10, // 标志图形的宽度
        itemGap: 20,
      },
      series: [
        {
          name: "事件发生数",
          type: "pie",
          radius: ["35%", "55%"],
          center: ["48%", "38%"],
          avoidLabelOverlap: false,
          itemStyle: {
            //borderRadius: 10,
            // borderColor: '#fff',
            // borderWidth: 2,
            color: function (params) {
              var colorList = [
                { c1: "#5EF5D3", c2: "#55C87E" },
                { c1: "#FED865", c2: "#E6B111" },
                { c1: "#57CCFE", c2: "#5696FF" },
                { c1: "#E83D17", c2: "#FF9179" },
                { c1: "#8188A9", c2: "#5F4D99" },
              ];
              return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                {
                  //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                  offset: 0,
                  color: colorList[params.dataIndex].c1,
                },
                {
                  offset: 1,
                  color: colorList[params.dataIndex].c2,
                },
              ]);
            },
          },
          label: {
            show: true,
            position: "outside",
            color: "#000",
            formatter: function (params) {
              var percent = 0;
              percent = ((params.value / total) * 100).toFixed(0);
              if (params.name !== "") {
                return params.value + "件" + "\n" + percent + "%";
                // return (
                //     params.name + '\n' +
                //     percent +
                //     "%"
                // );
              } else {
                return "";
              }
            },
          },
          labelLine: {
            length: 5,
            length2: 15,
            show: true,
            color: "#000",
          },
          data: treated,
        },
      ],
    };
  }

  option && safeAccidentChart.setOption(option);
}

function switchSafeAccidentChart(type) {
  safeModuleData.accidentType = type;
  initSafeAccidentChart(type);
}

function handleSafeAccidentChartTypeSwitch(val) {
  safeModuleData.isAccidentTypePie = val;
  let type = val ? "pie" : "bar";
  switchSafeAccidentChart(type);
}

//摄像头事件
let safeVideoChart = null;
function initSafeVideoChart(type) {
  let treatedHigh = [];
  let treatedLow = [];
  safeModuleData.videoData.sort(sortDate("date", true));
  safeModuleData.videoData.forEach((item) => {
    treatedHigh.push(item.highRiskLevelCount);
    treatedLow.push(item.lowRiskLevelCount);
  });
  let safeVideoDom = document.getElementById("safeVideoIndex");
  safeVideoChart = echarts.init(safeVideoDom);
  safeVideoChart.clear();
  let option = null;
  if (type == "bar") {
    option = {
      color: ["#FFD700"],
      legend: {
        itemWidth: 10, // 标志图形的长度
        itemHeight: 10, // 标志图形的宽度
      },
      grid: {
        x: 40,
        y: 40,
        x2: 20,
        y2: 25,
      },
      tooltip: {
        trigger: "axis",
        // formatter(params) {
        //     // 返回值就是html代码可以使用标签
        //     return `
        //         时刻：${params.data.title} </br>
        //         分数：${params.data.value}
        //     `;
        // },
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
        },
      },
      xAxis: {
        type: "category",
        data: dateArr,
        axisLabel: {
          interval: 0,
          // rotate: 45,
          color: "#000",
        },
        axisTick: {
          show: false, //不显示坐标轴刻度线
        },
        axisLine: {
          show: true, //不显示坐标轴线
          lineStyle: {
            color: "#939393 ",
          },
        },
      },
      yAxis: {
        type: "value",
        name: "单位：件",
        //nameRotate: '90',
        nameLocation: "end",
        nameTextStyle: {
          // fontSize: 14,
          padding: [0, 0, 0, -10],
        },
        axisTick: {
          show: false, //不显示坐标轴刻度线
        },
        axisLine: {
          show: true, //不显示坐标轴线
        },
        splitLine: {
          //网格线
          show: true,
        },
      },
      series: [
        {
          name: "高风险",
          data: treatedHigh,
          type: "bar",
          stack: "safe",
          barWidth: 25,
          // barGap:'90%'
          itemStyle: {
            color: {
              type: "linear",
              x: 0, //右
              y: 0, //下
              x2: 0, //左
              y2: 1, //上
              colorStops: [
                {
                  offset: 0,
                  color: "#E83D17", // 0% 处的颜色
                },
                // {
                //     offset: 0.7,
                //     color: '#2378f7' // 70% 处的颜色
                // },
                {
                  offset: 1,
                  color: "#F83C12", // 100% 处的颜色
                },
              ],
            },
          },
        },
        {
          name: "低风险",
          data: treatedLow,
          type: "bar",
          stack: "safe",
          barWidth: 25,
          // barGap:'90%'
          itemStyle: {
            color: {
              type: "linear",
              x: 0, //右
              y: 0, //下
              x2: 0, //左
              y2: 1, //上
              colorStops: [
                {
                  offset: 0,
                  color: "#16BAFF", // 0% 处的颜色
                },
                // {
                //     offset: 0.7,
                //     color: '#2378f7' // 70% 处的颜色
                // },
                {
                  offset: 1,
                  color: "#1457C7", // 100% 处的颜色
                },
              ],
            },
          },
        },
      ],
    };
  } else if (type == "line") {
    option = {
      color: ["#FFD700"],
      grid: {
        x: 40,
        y: 40,
        x2: 20,
        y2: 25,
      },
      tooltip: {
        trigger: "axis",
        // formatter(params) {
        //     // 返回值就是html代码可以使用标签
        //     return `
        //         时刻：${params.data.title} </br>
        //         分数：${params.data.value}
        //     `;
        // },
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
        },
      },
      xAxis: {
        type: "category",
        data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
        axisLabel: {
          interval: 0,
          color: "#000",
        },
        axisTick: {
          show: false, //不显示坐标轴刻度线
        },
        axisLine: {
          show: true, //不显示坐标轴线
          lineStyle: {
            color: "#8E8E8E ",
          },
        },
      },
      yAxis: {
        type: "value",
        name: "单位：件",
        //nameRotate: '90',
        nameLocation: "end",
        nameTextStyle: {
          // fontSize: 14,
          padding: [0, 0, 0, -10],
        },
        axisTick: {
          show: false, //不显示坐标轴刻度线
        },
        axisLine: {
          show: true, //不显示坐标轴线
        },
        splitLine: {
          //网格线
          show: true,
        },
      },
      series: [
        {
          name: "件数",
          data: safeModuleData.trendData,
          type: "line",
          itemStyle: {
            // 使用方法二的写法
            color: {
              type: "linear",
              x: 0, //右
              y: 0, //下
              x2: 0, //左
              y2: 1, //上
              colorStops: [
                {
                  offset: 0,
                  color: "#E7CFFC", // 0% 处的颜色
                },
                // {
                //     offset: 0.7,
                //     color: '#2378f7' // 70% 处的颜色
                // },
                {
                  offset: 1,
                  color: "#8DB6FB", // 100% 处的颜色
                },
              ],
            },
          },
        },
      ],
    };
  } else if (type == "pie") {
    let treated = [];
    let highRiskLevelTotal = 0;
    let lowRiskLevelTotal = 0;
    safeModuleData.videoData.sort(sortDate("date", true));
    safeModuleData.videoData.forEach((item, index) => {
      // treated.push({
      //   name: dateArr[index],
      //   value: item.highRiskLevelCount + item.lowRiskLevelCount,
      // });
      highRiskLevelTotal += item.highRiskLevelCount;
      lowRiskLevelTotal += item.lowRiskLevelCount;
    });
    // let total = 0;
    // for (let i = 0; i < treated.length; i++) {
    //   total += treated[i].value;
    // }
    treated = [
      { name: "高危", value: highRiskLevelTotal },
      { name: "低危", value: lowRiskLevelTotal },
    ];
    let total = highRiskLevelTotal + lowRiskLevelTotal;
    option = {
      tooltip: {
        trigger: "item",
        confine:true,
        formatter: function (params) {
          // ${params.marker}低危: <span>${safeModuleData.accidentData[params.dataIndex].lowRiskLevelCount}件</span><br>
          //     ${params.marker}高危: <span>${safeModuleData.accidentData[params.dataIndex].highRiskLevelCount}件</span><br>
          // return `<div>${params.name}<br>
          //           ${params.marker}${params.seriesName}：<span>${
          //   params.value
          // }件</span><br>
          //           ${params.marker}低风险: <span>${
          //   safeModuleData.videoData[params.dataIndex].lowRiskLevelCount
          // }件</span><br>
          //           ${params.marker}高风险: <span>${
          //   safeModuleData.videoData[params.dataIndex].highRiskLevelCount
          // }件</span><br>
          //           </div>`;
          // let domBegin = `<div>${params.name}<br>
          //   ${params.marker}${params.seriesName}：<span>${params.value}件</span><br>`;
          let domBegin = `<div>${params.name}<br>`;
          let content = "";
          safeModuleData.videoData.forEach((item, index) => {
            content += `${params.marker}${item.date}: <span>${
              params.name == "高危" ? item.highRiskLevelCount : item.lowRiskLevelCount
            }件</span><br>`;
          });
          let domEnd = `</div>`;
          return domBegin + content + domEnd;
        },
      },
      legend: {
        //data: dateArr,
        data: ["高危", "低危"],
        orient: "horizontal",
        left: "center",
        bottom: "5px",
        itemWidth: 10, // 标志图形的长度
        itemHeight: 10, // 标志图形的宽度
        itemGap: 5,
      },
      series: [
        {
          name: "事件数",
          type: "pie",
          radius: ["35%", "55%"],
          center: ["48%", "43%"],
          avoidLabelOverlap: false,
          itemStyle: {
            //borderRadius: 10,
            // borderColor: '#fff',
            // borderWidth: 2,
            color: function (params) {
              var colorList = [
                { c1: "#5EF5D3", c2: "#55C87E" },
                { c1: "#FED865", c2: "#E6B111" },
                { c1: "#57CCFE", c2: "#5696FF" },
                { c1: "#E83D17", c2: "#FF9179" },
                { c1: "#8188A9", c2: "#5F4D99" },
                { c1: "#BD92FC", c2: "#AD91EE" },
                { c1: "#93DFF8", c2: "#70CEF5" },
              ];
              return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                {
                  //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上

                  offset: 0,
                  color: colorList[params.dataIndex].c1,
                },
                {
                  offset: 1,
                  color: colorList[params.dataIndex].c2,
                },
              ]);
            },
          },
          label: {
            show: true,
            position: "outside",
            color: "#000",
            formatter: function (params) {
              var percent = 0;
              percent = ((params.value / total) * 100).toFixed(0);
              if (params.name !== "") {
                return params.value + "件" + "\n" + percent + "%";
                // return (
                //     params.name + '\n' +
                //     percent +
                //     "%"
                // );
              } else {
                return "";
              }
            },
          },
          labelLine: {
            length: 10,
            length2: 15,
            show: true,
            color: "#000",
          },
          data: treated,
        },
      ],
    };
  }
  option && safeVideoChart.setOption(option);
}
function switchSafeVideoChart(type) {
  safeModuleData.videoType = type;
  initSafeVideoChart(type);
}

function handleSafeVideoChartTypeSwitch(val) {
  safeModuleData.isVideoTypePie = val;
  let type = val ? "pie" : "bar";
  switchSafeVideoChart(type);
}

//工地进度在本周指数
let progressChart = null;
function initProgerssChart(type) {
  let progressDom = document.getElementById("progressIndex");
  progressChart = echarts.init(progressDom);
  progressChart.clear();
  let option = null;
  if (type == "bar") {
    option = {
      color: ["#FFD700"],
      grid: {
        x: 40,
        y: 40,
        x2: 20,
        y2: 25,
      },
      tooltip: {
        trigger: "axis",
        // formatter(params) {
        //     // 返回值就是html代码可以使用标签
        //     return `
        //         时刻：${params.data.title} </br>
        //         分数：${params.data.value}
        //     `;
        // },
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
        },
      },
      xAxis: {
        type: "category",
        data: dateArr,
        axisLabel: {
          interval: 0,
          // rotate: 45,
          color: "#000",
        },
        axisTick: {
          show: false, //不显示坐标轴刻度线
        },
        axisLine: {
          show: true, //不显示坐标轴线
          lineStyle: {
            color: "#939393 ",
          },
        },
      },
      yAxis: {
        type: "value",
        name: "单位：分",
        //nameRotate: '90',
        nameLocation: "end",
        nameTextStyle: {
          // fontSize: 14,
          padding: [0, 0, 0, -10],
        },
        axisTick: {
          show: false, //不显示坐标轴刻度线
        },
        axisLine: {
          show: true, //不显示坐标轴线
        },
        splitLine: {
          //网格线
          show: true,
        },
      },
      series: [
        {
          name: "评分",
          data: progressModuleData.progressData,
          type: "bar",
          barWidth: 25,
          // barGap:'90%'
          itemStyle: {
            // 使用方法二的写法
            color: {
              type: "linear",
              x: 0, //右
              y: 0, //下
              x2: 0, //左
              y2: 1, //上
              colorStops: [
                {
                  offset: 0,
                  color: "#FADC74", // 0% 处的颜色
                },
                // {
                //     offset: 0.7,
                //     color: '#2378f7' // 70% 处的颜色
                // },
                {
                  offset: 1,
                  color: "#D2B53F", // 100% 处的颜色
                },
              ],
            },
          },
        },
      ],
    };
  } else {
    option = {
      color: ["#FFD700"],
      grid: {
        x: 40,
        y: 40,
        x2: 20,
        y2: 25,
      },
      tooltip: {
        trigger: "axis",
        // formatter(params) {
        //     // 返回值就是html代码可以使用标签
        //     return `
        //         时刻：${params.data.title} </br>
        //         分数：${params.data.value}
        //     `;
        // },
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
        },
      },
      xAxis: {
        type: "category",
        data: dateArr,
        axisLabel: {
          interval: 0,
          color: "#000",
        },
        axisTick: {
          show: false, //不显示坐标轴刻度线
        },
        axisLine: {
          show: true, //不显示坐标轴线
          lineStyle: {
            color: "#8E8E8E ",
          },
        },
      },
      yAxis: {
        type: "value",
        name: "单位：分",
        //nameRotate: '90',
        nameLocation: "end",
        nameTextStyle: {
          // fontSize: 14,
          padding: [0, 0, 0, -10],
        },
        axisTick: {
          show: false, //不显示坐标轴刻度线
        },
        axisLine: {
          show: true, //不显示坐标轴线
        },
        splitLine: {
          //网格线
          show: true,
        },
      },
      series: [
        {
          name: "评分",
          data: progressModuleData.progressData,
          type: "line",
          itemStyle: {
            // 使用方法二的写法
            color: {
              type: "linear",
              x: 0, //右
              y: 0, //下
              x2: 0, //左
              y2: 1, //上
              colorStops: [
                {
                  offset: 0,
                  color: "#FADC74", // 0% 处的颜色
                },
                // {
                //     offset: 0.7,
                //     color: '#2378f7' // 70% 处的颜色
                // },
                {
                  offset: 1,
                  color: "#D2B53F", // 100% 处的颜色
                },
              ],
            },
          },
        },
      ],
    };
  }
  option && progressChart.setOption(option);
}

//进度本周一栏
let progressAccidentChart = null;
function initProgressAccidentChart(type) {
  let treatedFinish = [];
  let treatedOverdue = [];
  let treatedSeriousOverdue = [];
  let xAxisData = [];
  progressModuleData.accidentData.sort(sortDate("date", true));
  progressModuleData.accidentData.forEach((item) => {
    xAxisData.push(item.buildingName.replace("塔吊球机", ""));
    treatedFinish.push(item.floorFinish);
    treatedOverdue.push(item.floorOverdue);
    treatedSeriousOverdue.push(item.floorseriouslyOverdue);
  });
  let progressAccidentDom = document.getElementById("progressAccidentIndex");
  progressAccidentChart = echarts.init(progressAccidentDom);
  progressAccidentChart.clear();
  let option = null;
  if (type == "bar") {
    option = {
      color: ["#FFD700"],
      grid: {
        x: 40,
        y: 40,
        x2: 20,
        y2: 25,
      },
      legend: {
        itemWidth: 10, // 标志图形的长度
        itemHeight: 10, // 标志图形的宽度
      },
      tooltip: {
        trigger: "axis",
        // formatter(params) {
        //     // 返回值就是html代码可以使用标签
        //     return `
        //         时刻：${params.data.title} </br>
        //         分数：${params.data.value}
        //     `;
        // },
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
        },
      },
      xAxis: {
        type: "category",
        data: xAxisData,
        axisLabel: {
          interval: 0,
          // rotate: 45,
          color: "#000",
        },
        axisTick: {
          show: false, //不显示坐标轴刻度线
        },
        axisLine: {
          show: true, //不显示坐标轴线
          lineStyle: {
            color: "#939393 ",
          },
        },
      },
      yAxis: {
        type: "value",
        name: "单位：件",
        //nameRotate: '90',
        nameLocation: "end",
        nameTextStyle: {
          // fontSize: 14,
          padding: [0, 0, 0, -10],
        },
        axisTick: {
          show: false, //不显示坐标轴刻度线
        },
        axisLine: {
          show: true, //不显示坐标轴线
        },
        splitLine: {
          //网格线
          show: true,
        },
      },
      series: [
        {
          name: "完成",
          data: treatedFinish,
          type: "bar",
          barWidth: 25,
          stack: "progress",
          // barGap:'90%'
          itemStyle: {
            // 使用方法二的写法
            //color: '#16abf6'
            color: {
              type: "linear",
              x: 0, //右
              y: 0, //下
              x2: 0, //左
              y2: 1, //上
              colorStops: [
                {
                  offset: 0,
                  color: "#16BAFF", // 0% 处的颜色
                },
                // {
                //     offset: 0.7,
                //     color: '#2378f7' // 70% 处的颜色
                // },
                {
                  offset: 1,
                  color: "#1457C7", // 100% 处的颜色
                },
              ],
            },
          },
        },
        {
          name: "逾期",
          data: treatedOverdue,
          type: "bar",
          stack: "progress",
          barWidth: 25,
          // barGap:'90%'
          itemStyle: {
            // 使用方法二的写法
            //color: '#fec61d',
            color: {
              type: "linear",
              x: 0, //右
              y: 0, //下
              x2: 0, //左
              y2: 1, //上
              colorStops: [
                {
                  offset: 0,
                  color: "#FFC71E", // 0% 处的颜色
                },
                // {
                //     offset: 0.7,
                //     color: '#2378f7' // 70% 处的颜色
                // },
                {
                  offset: 1,
                  color: "#E6B111", // 100% 处的颜色
                },
              ],
            },
          },
        },
        {
          name: "严重逾期",
          data: treatedSeriousOverdue,
          type: "bar",
          stack: "progress",
          barWidth: 25,
          // barGap:'90%'
          itemStyle: {
            // 使用方法二的写法
            //color: '#fc552b'
            color: {
              type: "linear",
              x: 0, //右
              y: 0, //下
              x2: 0, //左
              y2: 1, //上
              colorStops: [
                {
                  offset: 0,
                  color: "#E83D17", // 0% 处的颜色
                },
                // {
                //     offset: 0.7,
                //     color: '#2378f7' // 70% 处的颜色
                // },
                {
                  offset: 1,
                  color: "#F83C12", // 100% 处的颜色
                },
              ],
            },
          },
        },
      ],
    };
  } else {
    option = {
      color: ["#FFD700"],
      grid: {
        x: 40,
        y: 40,
        x2: 20,
        y2: 25,
      },
      tooltip: {
        trigger: "axis",
        // formatter(params) {
        //     // 返回值就是html代码可以使用标签
        //     return `
        //         时刻：${params.data.title} </br>
        //         分数：${params.data.value}
        //     `;
        // },
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
        },
      },
      xAxis: {
        type: "category",
        data: xAxisData,
        axisLabel: {
          interval: 0,
          color: "#000",
        },
        axisTick: {
          show: false, //不显示坐标轴刻度线
        },
        axisLine: {
          show: true, //不显示坐标轴线
          lineStyle: {
            color: "#8E8E8E ",
          },
        },
      },
      yAxis: {
        type: "value",
        name: "单位：件",
        //nameRotate: '90',
        nameLocation: "end",
        nameTextStyle: {
          // fontSize: 14,
          padding: [0, 0, 0, -10],
        },
        axisTick: {
          show: false, //不显示坐标轴刻度线
        },
        axisLine: {
          show: true, //不显示坐标轴线
        },
        splitLine: {
          //网格线
          show: true,
        },
      },
      series: [
        {
          name: "事件",
          data: progressModuleData.accidentData,
          type: "line",
          itemStyle: {
            // 使用方法二的写法
            color: {
              type: "linear",
              x: 0, //右
              y: 0, //下
              x2: 0, //左
              y2: 1, //上
              colorStops: [
                {
                  offset: 0,
                  color: "#CFE4FC", // 0% 处的颜色
                },
                // {
                //     offset: 0.7,
                //     color: '#2378f7' // 70% 处的颜色
                // },
                {
                  offset: 1,
                  color: "#89A3F8", // 100% 处的颜色
                },
              ],
            },
          },
        },
      ],
    };
  }
  option && progressAccidentChart.setOption(option);
}

//楼层进度百分比
let progressPrecentChart = null;
function initProgressPrecentChart(type) {
  let treatedName = [];
  let treatedValue = [];
  progressModuleData.tableData.forEach((item) => {
    let arr = [];
    let totalLength = item.floorStatus.length;
    for (let i = 0; i < totalLength; i++) {
      arr.push(item.floorStatus[i]);
    }
    let index = arr.indexOf(3);
    let precent = 0;
    if (index > -1) {
      if (index == 0) {
        precent = 0;
      } else {
        precent = ((index / totalLength) * 100).toFixed(0);
      }
    } else {
      precent = 100;
    }
    let num = 0;
    for (let i = 0; i < totalLength; i++) {
      if (item.floorStatus[i] != 0) {
        num++;
      }
    }
    precent = ((num / totalLength) * 100).toFixed(0);
    treatedName.push(item.deviceId + "号楼");
    treatedValue.push(precent);
  });
  let progressPrecentDom = document.getElementById("progressPrecentChart");
  progressPrecentChart = echarts.init(progressPrecentDom);
  progressPrecentChart.clear();
  let option = null;
  if (type == "bar") {
    option = {
      color: ["#FFD700"],
      grid: {
        x: 40,
        y: 40,
        x2: 20,
        y2: 25,
      },
      tooltip: {
        trigger: "axis",
        // formatter(params) {
        //     // 返回值就是html代码可以使用标签
        //     return `
        //         时刻：${params.data.title} </br>
        //         分数：${params.data.value}
        //     `;
        // },
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
        },
      },
      xAxis: {
        type: "category",
        data: treatedName,
        axisLabel: {
          interval: 0,
          // rotate: 45,
          color: "#000",
        },
        axisTick: {
          show: false, //不显示坐标轴刻度线
        },
        axisLine: {
          show: true, //不显示坐标轴线
          lineStyle: {
            color: "#939393 ",
          },
        },
      },
      yAxis: {
        type: "value",
        name: "单位：%",
        //nameRotate: '90',
        nameLocation: "end",
        nameTextStyle: {
          // fontSize: 14,
          padding: [0, 0, 0, -10],
        },
        axisTick: {
          show: false, //不显示坐标轴刻度线
        },
        axisLine: {
          show: true, //不显示坐标轴线
        },
        splitLine: {
          //网格线
          show: true,
        },
      },
      series: [
        {
          name: "进度",
          data: treatedValue,
          type: "bar",
          barWidth: 18,
          // barGap:'90%'
          itemStyle: {
            // 使用方法二的写法
            color: {
              type: "linear",
              x: 0, //右
              y: 0, //下
              x2: 0, //左
              y2: 1, //上
              colorStops: [
                {
                  offset: 0,
                  color: "#16BAFF", // 0% 处的颜色
                },
                // {
                //     offset: 0.7,
                //     color: '#2378f7' // 70% 处的颜色
                // },
                {
                  offset: 1,
                  color: "#1457C7", // 100% 处的颜色
                },
              ],
            },
          },
        },
      ],
    };
  } else {
    option = {
      color: ["#FFD700"],
      grid: {
        x: 40,
        y: 40,
        x2: 20,
        y2: 25,
      },
      tooltip: {
        trigger: "axis",
        // formatter(params) {
        //     // 返回值就是html代码可以使用标签
        //     return `
        //         时刻：${params.data.title} </br>
        //         分数：${params.data.value}
        //     `;
        // },
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
        },
      },
      xAxis: {
        type: "category",
        data: dateArr,
        axisLabel: {
          interval: 0,
          color: "#000",
        },
        axisTick: {
          show: false, //不显示坐标轴刻度线
        },
        axisLine: {
          show: true, //不显示坐标轴线
          lineStyle: {
            color: "#8E8E8E ",
          },
        },
      },
      yAxis: {
        type: "value",
        name: "单位：分",
        //nameRotate: '90',
        nameLocation: "end",
        nameTextStyle: {
          // fontSize: 14,
          padding: [0, 0, 0, -10],
        },
        axisTick: {
          show: false, //不显示坐标轴刻度线
        },
        axisLine: {
          show: true, //不显示坐标轴线
        },
        splitLine: {
          //网格线
          show: true,
        },
      },
      series: [
        {
          name: "评分",
          data: environmentModuleData.trendData,
          type: "line",
          itemStyle: {
            // 使用方法二的写法
            color: {
              type: "linear",
              x: 0, //右
              y: 0, //下
              x2: 0, //左
              y2: 1, //上
              colorStops: [
                {
                  offset: 0,
                  color: "#12D6AA ", // 0% 处的颜色
                },
                // {
                //     offset: 0.7,
                //     color: '#2378f7' // 70% 处的颜色
                // },
                {
                  offset: 1,
                  color: "#0A9351", // 100% 处的颜色
                },
              ],
            },
          },
        },
      ],
    };
  }
  option && progressPrecentChart.setOption(option);
}

//环境趋势指数
let environmentTrendChart = null;
function initEnvironmentTrendChart(type) {
  let environmentTrendDom = document.getElementById("environmentTrendIndex");
  environmentTrendChart = echarts.init(environmentTrendDom);
  environmentTrendChart.clear();
  let option = null;
  if (type == "bar") {
    option = {
      color: ["#FFD700"],
      grid: {
        x: 40,
        y: 40,
        x2: 20,
        y2: 25,
      },
      tooltip: {
        trigger: "axis",
        // formatter(params) {
        //     // 返回值就是html代码可以使用标签
        //     return `
        //         时刻：${params.data.title} </br>
        //         分数：${params.data.value}
        //     `;
        // },
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
        },
      },
      xAxis: {
        type: "category",
        data: dateArr,
        axisLabel: {
          interval: 0,
          // rotate: 45,
          color: "#000",
        },
        axisTick: {
          show: false, //不显示坐标轴刻度线
        },
        axisLine: {
          show: true, //不显示坐标轴线
          lineStyle: {
            color: "#939393 ",
          },
        },
      },
      yAxis: {
        type: "value",
        name: "单位：分",
        //nameRotate: '90',
        nameLocation: "end",
        nameTextStyle: {
          // fontSize: 14,
          padding: [0, 0, 0, -10],
        },
        axisTick: {
          show: false, //不显示坐标轴刻度线
        },
        axisLine: {
          show: true, //不显示坐标轴线
        },
        splitLine: {
          //网格线
          show: true,
        },
      },
      series: [
        {
          name: "评分",
          data: environmentModuleData.trendData,
          type: "bar",
          barWidth: 18,
          // barGap:'90%'
          itemStyle: {
            // 使用方法二的写法
            color: {
              type: "linear",
              x: 0, //右
              y: 0, //下
              x2: 0, //左
              y2: 1, //上
              colorStops: [
                {
                  offset: 0,
                  color: "#12D6AA ", // 0% 处的颜色
                },
                // {
                //     offset: 0.7,
                //     color: '#2378f7' // 70% 处的颜色
                // },
                {
                  offset: 1,
                  color: "#0A9351", // 100% 处的颜色
                },
              ],
            },
          },
        },
      ],
    };
  } else {
    option = {
      color: ["#FFD700"],
      grid: {
        x: 40,
        y: 40,
        x2: 20,
        y2: 25,
      },
      tooltip: {
        trigger: "axis",
        // formatter(params) {
        //     // 返回值就是html代码可以使用标签
        //     return `
        //         时刻：${params.data.title} </br>
        //         分数：${params.data.value}
        //     `;
        // },
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
        },
      },
      xAxis: {
        type: "category",
        data: dateArr,
        axisLabel: {
          interval: 0,
          color: "#000",
        },
        axisTick: {
          show: false, //不显示坐标轴刻度线
        },
        axisLine: {
          show: true, //不显示坐标轴线
          lineStyle: {
            color: "#8E8E8E ",
          },
        },
      },
      yAxis: {
        type: "value",
        name: "单位：分",
        //nameRotate: '90',
        nameLocation: "end",
        nameTextStyle: {
          // fontSize: 14,
          padding: [0, 0, 0, -10],
        },
        axisTick: {
          show: false, //不显示坐标轴刻度线
        },
        axisLine: {
          show: true, //不显示坐标轴线
        },
        splitLine: {
          //网格线
          show: true,
        },
      },
      series: [
        {
          name: "评分",
          data: environmentModuleData.trendData,
          type: "line",
          itemStyle: {
            // 使用方法二的写法
            color: {
              type: "linear",
              x: 0, //右
              y: 0, //下
              x2: 0, //左
              y2: 1, //上
              colorStops: [
                {
                  offset: 0,
                  color: "#12D6AA ", // 0% 处的颜色
                },
                // {
                //     offset: 0.7,
                //     color: '#2378f7' // 70% 处的颜色
                // },
                {
                  offset: 1,
                  color: "#0A9351", // 100% 处的颜色
                },
              ],
            },
          },
        },
      ],
    };
  }
  option && environmentTrendChart.setOption(option);
}

//环境发生数
let myChart = null;
function initEnvironmentAccidentChart() {
  let treated = [];
  let legendData = [];
  environmentModuleData.accidentData.forEach((item) => {
    treated.push({
      //name: getDeviceNameById(item.deviceId),
      //value: item.dailyMarkDeductionCount
      name: getEnvirNameByType(item.algorithmType),
      value: item.eventCount,
    });
    legendData.push({
      //name: getDeviceNameById(item.deviceId),
      name: getEnvirNameByType(item.algorithmType),
    });
  });
  let total = 0;
  for (let i = 0; i < treated.length; i++) {
    total += treated[i].value;
  }
  let chartDom = document.getElementById("environmentAccidentIndex");
  myChart = echarts.init(chartDom);
  myChart.clear();
  let option;
  option = {
    //color: ['#fb5128', '#f6bf19', '#16adf7', '#11cc9d', '#73c0de'],
    tooltip: {
      trigger: "item",
    },
    legend: {
      data: legendData,
      orient: "horizontal",
      bottom: "5px",
      itemWidth: 10, // 标志图形的长度
      itemHeight: 10, // 标志图形的宽度
      itemGap: 20,
    },
    series: [
      {
        name: "事件发生数",
        type: "pie",
        radius: ["35%", "55%"],
        center: ["48%", "38%"],
        avoidLabelOverlap: false,
        itemStyle: {
          // borderRadius: 10,
          // borderColor: '#fff',
          // borderWidth: 2,
          color: function (params) {
            var colorList = [
              { c1: "#E83D17", c2: "#F83C12" },
              { c1: "#FFC71E", c2: "#E6B111" },
              { c1: "#16BAFF", c2: "#1457C7" },
              { c1: "#12D6AA", c2: "#0A9351" },
              { c1: "#8188A9", c2: "#5F4D99" },
            ];
            return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
              {
                //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上

                offset: 0,
                color: colorList[params.dataIndex].c1,
              },
              {
                offset: 1,
                color: colorList[params.dataIndex].c2,
              },
            ]);
          },
        },
        label: {
          show: true,
          position: "outside",
          color: "#000",
          formatter: function (params) {
            var percent = 0;
            percent = ((params.value / total) * 100).toFixed(0);
            if (params.name !== "") {
              return params.value + "件" + "\n" + percent + "%";
              // return (
              //     params.name + '\n' +
              //     percent +
              //     "%"
              // );
            } else {
              return "";
            }
          },
        },
        labelLine: {
          length: 5,
          length2: 15,
          show: true,
          color: "#000",
        },
        data: treated,
      },
    ],
  };
  option && myChart.setOption(option);
}

//环境摄像头事件
let environmentVideoChart = null;
function initEnvironmentVideoChart(type) {
  let workAreaCount = [];
  let mainChannel = [];
  let rubbishDump = [];
  let material = [];
  environmentModuleData.videoData.sort(sortDate("date", true));
  environmentModuleData.videoData.forEach((item) => {
    workAreaCount.push(item.workingArea);
    mainChannel.push(item.mainChannel);
    rubbishDump.push(item.rubbishDump);
    material.push(item.material);
  });
  let environmentVideoDom = document.getElementById("environmentVideoIndex");
  environmentVideoChart = echarts.init(environmentVideoDom);
  environmentVideoChart.clear();
  let option = null;
  if (type == "bar") {
    option = {
      color: ["#FFD700"],
      grid: {
        x: 40,
        y: 40,
        x2: 20,
        y2: 25,
      },
      legend: {
        itemWidth: 10, // 标志图形的长度
        itemHeight: 10, // 标志图形的宽度
      },
      tooltip: {
        trigger: "axis",
        // formatter(params) {
        //     // 返回值就是html代码可以使用标签
        //     return `
        //         时刻：${params.data.title} </br>
        //         分数：${params.data.value}
        //     `;
        // },
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
        },
      },
      xAxis: {
        type: "category",
        data: dateArr,
        axisLabel: {
          interval: 0,
          // rotate: 45,
          color: "#000",
        },
        axisTick: {
          show: false, //不显示坐标轴刻度线
        },
        axisLine: {
          show: true, //不显示坐标轴线
          lineStyle: {
            color: "#939393 ",
          },
        },
      },
      yAxis: {
        type: "value",
        name: "单位：件",
        //nameRotate: '90',
        nameLocation: "end",
        nameTextStyle: {
          // fontSize: 14,
          padding: [0, 0, -10, -10],
        },
        axisTick: {
          show: false, //不显示坐标轴刻度线
        },
        axisLine: {
          show: true, //不显示坐标轴线
        },
        splitLine: {
          //网格线
          show: true,
        },
      },
      series: [
        {
          name: "作业面",
          data: workAreaCount,
          type: "bar",
          barWidth: 10,
          //stack: 'environment',
          // barGap:'90%'
          itemStyle: {
            color: {
              type: "linear",
              x: 0, //右
              y: 0, //下
              x2: 0, //左
              y2: 1, //上
              colorStops: [
                {
                  offset: 0,
                  color: "#12D6AA", // 0% 处的颜色
                },
                // {
                //     offset: 0.7,
                //     color: '#2378f7' // 70% 处的颜色
                // },
                {
                  offset: 1,
                  color: "#0A9351", // 100% 处的颜色
                },
              ],
            },
          },
        },
        {
          name: "主通道",
          data: mainChannel,
          type: "bar",
          barWidth: 10,
          //stack: 'environment',
          // barGap:'90%'
          itemStyle: {
            // 使用方法二的写法
            //color: '#fc5f36'
            color: {
              type: "linear",
              x: 0, //右
              y: 0, //下
              x2: 0, //左
              y2: 1, //上
              colorStops: [
                {
                  offset: 0,
                  color: "#E83D17", // 0% 处的颜色
                },
                // {
                //     offset: 0.7,
                //     color: '#2378f7' // 70% 处的颜色
                // },
                {
                  offset: 1,
                  color: "#F83C12", // 100% 处的颜色
                },
              ],
            },
          },
        },
        {
          name: "垃圾堆场",
          data: rubbishDump,
          type: "bar",
          barWidth: 10,
          //stack: 'environment',
          // barGap:'90%'
          itemStyle: {
            // 使用方法二的写法
            //color: '#16a7f4',
            color: {
              type: "linear",
              x: 0, //右
              y: 0, //下
              x2: 0, //左
              y2: 1, //上
              colorStops: [
                {
                  offset: 0,
                  color: "#16BAFF", // 0% 处的颜色
                },
                // {
                //     offset: 0.7,
                //     color: '#2378f7' // 70% 处的颜色
                // },
                {
                  offset: 1,
                  color: "#1457C7", // 100% 处的颜色
                },
              ],
            },
          },
        },
        {
          name: "材料堆放区",
          data: material,
          type: "bar",
          barWidth: 10,
          //stack: 'environment',
          // barGap:'90%'
          itemStyle: {
            // 使用方法二的写法
            //color: '#f3cb4b'
            color: {
              type: "linear",
              x: 0, //右
              y: 0, //下
              x2: 0, //左
              y2: 1, //上
              colorStops: [
                {
                  offset: 0,
                  color: "#FFC71E", // 0% 处的颜色
                },
                // {
                //     offset: 0.7,
                //     color: '#2378f7' // 70% 处的颜色
                // },
                {
                  offset: 1,
                  color: "#E6B111", // 100% 处的颜色
                },
              ],
            },
          },
        },
      ],
    };
  } else {
    option = {
      color: ["#FFD700"],
      grid: {
        x: 40,
        y: 40,
        x2: 20,
        y2: 25,
      },
      tooltip: {
        trigger: "axis",
        // formatter(params) {
        //     // 返回值就是html代码可以使用标签
        //     return `
        //         时刻：${params.data.title} </br>
        //         分数：${params.data.value}
        //     `;
        // },
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
        },
      },
      xAxis: {
        type: "category",
        data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
        axisLabel: {
          interval: 0,
          color: "#000",
        },
        axisTick: {
          show: false, //不显示坐标轴刻度线
        },
        axisLine: {
          show: true, //不显示坐标轴线
          lineStyle: {
            color: "#8E8E8E ",
          },
        },
      },
      yAxis: {
        type: "value",
        name: "单位：件",
        //nameRotate: '90',
        nameLocation: "end",
        nameTextStyle: {
          // fontSize: 14,
          padding: [0, 0, 0, -10],
        },
        axisTick: {
          show: false, //不显示坐标轴刻度线
        },
        axisLine: {
          show: true, //不显示坐标轴线
        },
        splitLine: {
          //网格线
          show: true,
        },
      },
      series: [
        {
          name: "件数",
          data: environmentModuleData.trendData,
          type: "line",
          itemStyle: {
            // 使用方法二的写法
            color: {
              type: "linear",
              x: 0, //右
              y: 0, //下
              x2: 0, //左
              y2: 1, //上
              colorStops: [
                {
                  offset: 0,
                  color: "#CFFCF1", // 0% 处的颜色
                },
                // {
                //     offset: 0.7,
                //     color: '#2378f7' // 70% 处的颜色
                // },
                {
                  offset: 1,
                  color: "#1EB8A4", // 100% 处的颜色
                },
              ],
            },
          },
        },
      ],
    };
  }
  option && environmentVideoChart.setOption(option);
}

//切换
function handleSwitch(module, direction, index) {
  let moduleName = "";
  switch (module) {
    case "safe":
      moduleName = "safeModule";
      break;
    case "progress":
      moduleName = "progressModule";
      break;
    case "environment":
      moduleName = "environmentModule";
      break;
  }
  if (index == 1) {
    if (direction == "left") {
      document.getElementsByClassName(moduleName)[0].style.transform = "translateX(-75%)";
    } else {
      document.getElementsByClassName(moduleName)[0].style.transform = "translateX(-50%)";
    }
  } else if (index == 2) {
    if (direction == "left") {
      document.getElementsByClassName(moduleName)[0].style.transform = "translateX(-25%)";
    } else {
      document.getElementsByClassName(moduleName)[0].style.transform = "translateX(-75%)";
    }
  } else {
    if (direction == "left") {
      document.getElementsByClassName(moduleName)[0].style.transform = "translateX(-50%)";
    } else {
      document.getElementsByClassName(moduleName)[0].style.transform = "translateX(-25%)";
    }
  }
}

//全屏
function fullScreen() {
  if (isMiddleScreen.value) {
    document.getElementsByClassName("sider-r")[0].style.width = "1500px";
    document.getElementsByClassName("rightChart")[0].style.width = "1500px";

    document.getElementsByClassName("safeModule")[0].style.justifyContent =
      "space-between";
    document.getElementsByClassName("safeModule")[0].style.transform = "translateX(0%)";
    document.getElementsByClassName("safeModule")[0].style.marginBottom = "25px";

    document.getElementsByClassName("progressModule")[0].style.justifyContent =
      "space-between";
    document.getElementsByClassName("progressModule")[0].style.transform =
      "translateX(0%)";
    document.getElementsByClassName("progressModule")[0].style.marginBottom = "25px";

    document.getElementsByClassName("environmentModule")[0].style.justifyContent =
      "space-between";
    document.getElementsByClassName("environmentModule")[0].style.transform =
      "translateX(0%)";
    document.getElementsByClassName("environmentModule")[0].style.marginBottom = "25px";
    isFullScreen.value = true;
    isMiddleScreen.value = false;
  } else if (!(isMiddleScreen.value && isFullScreen.value)) {
    document.getElementsByClassName("sider-r")[0].style.transform = "translateX(0px)";
    isMiddleScreen.value = true;
    isFullScreen.value = false;
  }
}

//缩小
function escView() {
  if (isFullScreen.value) {
    document.getElementsByClassName("sider-r")[0].style.width = "400px";
    document.getElementsByClassName("rightChart")[0].style.width = "1500px";

    document.getElementsByClassName("safeModule")[0].style.justifyContent = "flex-start";
    document.getElementsByClassName("safeModule")[0].style.transform =
      "translateX(300px)";
    document.getElementsByClassName("safeModule")[0].style.marginBottom = "0px";

    document.getElementsByClassName("progressModule")[0].style.justifyContent =
      "flex-start";
    document.getElementsByClassName("progressModule")[0].style.transform =
      "translateX(300px)";
    document.getElementsByClassName("progressModule")[0].style.marginBottom = "0px";

    document.getElementsByClassName("environmentModule")[0].style.justifyContent =
      "flex-start";
    document.getElementsByClassName("environmentModule")[0].style.transform =
      "translateX(300px)";
    document.getElementsByClassName("environmentModule")[0].style.marginBottom = "0px";
    isFullScreen.value = false;
    isMiddleScreen.value = true;
  } else if (isMiddleScreen.value) {
    document.getElementsByClassName("sider-r")[0].style.transform = "translateX(400px)";
    isFullScreen.value = false;
    isMiddleScreen.value = false;
  }
}

//根据ID获取设备名称
function getDeviceNameById(id) {
  let name = "";
  for (let i = 0, l = proxy._GLOBAL.DEVICEINFO.length; i < l; i++) {
    if (id === proxy._GLOBAL.DEVICEINFO[i].deviceId) {
      name = proxy._GLOBAL.DEVICEINFO[i].deviceInfo;
      break;
    }
  }
  return name;
}

//根据算法id获取算法名称
function getEnvirNameByType(type) {
  switch (type) {
    case 0:
      return "主通道";
    case 1:
      return "作业面";
    case 2:
      return "垃圾堆场";
    case 3:
      return "材料堆放区";
  }
}

//根据算法type 获取算法名称安全
function getSafeNameByType(type) {
  switch (type) {
    case 0:
      return "安全区";
    case 1:
      return "识别区";
    case 2:
      return "作业面";
    case 3:
      return "火灾烟雾区";
  }
}

watch(
  () => props.isFullScreen,
  (newProps) => {
    if (!newProps) {
      safeModuleData.safeShow.s1Show = true;
      safeModuleData.safeShow.s2Show = true;
      safeModuleData.safeShow.s3Show = true;
      progressModuleData.progressShow.p1Show = true;
      progressModuleData.progressShow.p2Show = true;
      progressModuleData.progressShow.p3Show = true;
      environmentModuleData.environmentShow.e1Show = true;
      environmentModuleData.environmentShow.e2Show = true;
      environmentModuleData.environmentShow.e3Show = true;
    }
  }
);

onMounted(() => {
  window.onresize = function () {
    if (progressChart) {
      progressChart.resize();
    }
    if (progressAccidentChart) {
      progressAccidentChart.resize();
    }
    if (progressPrecentChart) {
      progressPrecentChart.resize();
    }
    if (safeAccidentChart) {
      safeAccidentChart.resize();
    }
    if (safeTrendChart) {
      safeTrendChart.resize();
    }
    if (safeVideoChart) {
      safeVideoChart.resize();
    }
    if (environmentTrendChart) {
      environmentTrendChart.resize();
    }
    if (myChart) {
      myChart.resize();
    }
    if (environmentVideoChart) {
      environmentVideoChart.resize();
    }
  };

  let timeData = currentWeek();
  let arr = [];
  timeData.dateList.forEach((item) => {
    arr.push(item.slice(5));
  });
  dateArr = arr;
  let newStartTime = new Date(timeData.startTime);
  let newEndTime = new Date(timeData.endTime);
  newStartTime = new Date(newStartTime.setDate(newStartTime.getDate() - 1))
    .toISOString()
    .split("T")[0];
  newEndTime = new Date(newEndTime.setDate(newEndTime.getDate() - 1))
    .toISOString()
    .split("T")[0];
  api.homepage
    .getChartsInfoByDuration({
      startDate: timeData.startTime,
      endDate: timeData.endTime,
    })
    .then((res) => {
      //安全模块
      let safeModuleRes = _.filter(res, ["chartType", "safety"])[0].chartInfos;
      //安全模块折线
      safeModuleData.trendData = _.filter(safeModuleRes, [
        "chartTitle",
        "本周指数趋势",
      ])[0].data;
      //事件发生饼状图
      //safeModuleData.accidentData = _.filter(safeModuleRes, ['chartTitle', '本周事件发生数'])[0].data;
      //摄像头事件堆叠图
      safeModuleData.videoData = _.filter(safeModuleRes, [
        "chartTitle",
        "本周摄像头事件",
      ])[0].data;

      //安全
      initSafeTrendChart("line");
      initSafeVideoChart(safeModuleData.videoType);

      //进度模块
      let progressModuleRes = _.filter(res, ["chartType", "progress"])[0].chartInfos;
      //进度模块指数趋势
      progressModuleData.progressData = _.filter(progressModuleRes, [
        "chartTitle",
        "本周指数趋势",
      ])[0].data;
      //进度一览
      let progressTable = _.filter(progressModuleRes, ["chartTitle", "进度一览"])[0].data;
      //确定表格列
      let maxFloor = 0;
      progressTable.forEach((item) => {
        if (maxFloor < item.floorStatus.length) {
          maxFloor = item.floorStatus.length;
        }
      });
      progressModuleData.toatlFloor = maxFloor;
      progressModuleData.tableData = progressTable;
      //工程最新进展
      progressModuleData.accidentData = _.filter(progressModuleRes, [
        "chartTitle",
        "工程最新进度",
      ])[0].data;
      //进度
      initProgerssChart("line");
      initProgressPrecentChart("bar");
      initProgressAccidentChart("bar");

      //环境模块
      let leanModuleRes = _.filter(res, ["chartType", "lean"])[0].chartInfos;
      //本周指数趋势
      environmentModuleData.trendData = _.filter(leanModuleRes, [
        "chartTitle",
        "本周指数趋势",
      ])[0].data;
      //本周违规分布
      // let enAccidentData = _.filter(leanModuleRes, ['chartTitle', '本周违规分布'])[0].data;
      // let treated = [];
      // enAccidentData.forEach(item => {
      //     treated.push({
      //         deviceName: getDeviceNameById(item.deviceId),
      //         ...item
      //     });
      // })
      // environmentModuleData.accidentData = treated;
      //environmentModuleData.accidentData = _.filter(leanModuleRes, ['chartTitle', '本周违规分布'])[0].data;
      //扣分事件类型分布
      environmentModuleData.videoData = _.filter(leanModuleRes, [
        "chartTitle",
        "扣分事件类型分布",
      ])[0].data;
      //环境
      initEnvironmentTrendChart("bar");
      initEnvironmentVideoChart("bar");
    });
  api.safety
    .getSafetyInfoByDuration({
      startDate: moment().format("YYYY-MM-01"),
      endDate: moment().format("YYYY-MM-DD"),
      algorithmType: "safety",
    })
    .then((res) => {
      safeModuleData.accidentData = res.data;
      setTimeout(() => {
        initSafeAccidentChart(safeModuleData.accidentType);
      }, 500);
    });
  api.envir
    .getLeanInfoByDuration({
      startDate: moment().format("YYYY-MM-01"),
      endDate: moment().format("YYYY-MM-DD"),
      algorithmType: "lean",
    })
    .then((res) => {
      environmentModuleData.accidentData = res.data;
      setTimeout(() => {
        initEnvironmentAccidentChart();
      }, 500);
    });
});
onUnmounted(() => {});
</script>

<template>
  <div class="rightChart">
    <!-- <div class="menu">
            <img src="@/assets/images/index/left1.png" @click="fullScreen" />
            <img src="@/assets/images/index/right1.png" @click="escView" />
        </div> -->
    <div class="menu" v-if="isFullScreen">
      <el-tree
        ref="safeTreeRef"
        :data="safeModuleData.safeTree"
        show-checkbox
        node-key="id"
        highlight-current
        :props="defaultProps"
        class="safeTree"
        :default-checked-keys="['s1', 's2', 's3']"
        @check="handleSafeCheck"
      />
      <el-tree
        ref="progressTreeRef"
        :data="progressModuleData.progressTree"
        show-checkbox
        node-key="id"
        highlight-current
        :props="defaultProps"
        class="progressTree"
        :default-checked-keys="['p1', 'p2', 'p3']"
        @check="handleProgressCheck"
      />
      <el-tree
        ref="environmentTreeRef"
        :data="environmentModuleData.environmentTree"
        show-checkbox
        node-key="id"
        highlight-current
        :props="defaultProps"
        class="environmentTree"
        :default-checked-keys="['e1', 'e2', 'e3']"
        @check="handleEnvironmentCheck"
      />
    </div>
    <div class="safeModule" v-show="safeModuleShow">
      <div class="leftContent">
        <div class="content">
          <img src="@/assets/images/index/safe.png" />
          <span>安全模块</span>
        </div>
      </div>
      <div
        :class="['safeModuleItem', safeModuleData.safeShow.s1Show ? '' : 'hiddenChart']"
        v-show="safeModuleData.safeShow.s1Show"
      >
        <div class="charttitle">
          <span class="titleName">{{
            isFullScreen ? "本周事件发生数" : "安全统计"
          }}</span>
          <el-switch
            class="mySwitch"
            v-model="safeModuleData.isAccidentTypePie"
            size="small"
            active-text="饼图"
            inactive-text="条形图"
            @change="handleSafeAccidentChartTypeSwitch"
          />
        </div>
        <div id="safeAccidentIndex"></div>
        <div class="footer" v-show="!isFullScreen">
          <i class="leftBtn" @click="handleSwitch('safe', 'left', 1)"></i>
          <span class="title">本周事件发生数</span>
          <i class="rightBtn" @click="handleSwitch('safe', 'right', 1)"></i>
        </div>
      </div>
      <div
        :class="['safeModuleItem', safeModuleData.safeShow.s2Show ? '' : 'hiddenChart']"
        v-show="safeModuleData.safeShow.s2Show"
      >
        <div class="charttitle">
          <span class="titleName">{{
            isFullScreen ? "本周安全指数趋势" : "安全统计"
          }}</span>
          <el-select
            v-model="safeModuleData.safePeriod"
            class="m-2 mySelect"
            placeholder="Select"
            size="small"
          >
            <el-option
              v-for="item in safeModuleData.safePeriodList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div id="safeTrendIndex"></div>
        <div class="footer" v-show="!isFullScreen">
          <i class="leftBtn" @click="handleSwitch('safe', 'left', 2)"></i>
          <span class="title">本周安全指数趋势</span>
          <i class="rightBtn" @click="handleSwitch('safe', 'right', 2)"></i>
        </div>
      </div>
      <div
        :class="['safeModuleItem', safeModuleData.safeShow.s3Show ? '' : 'hiddenChart']"
        v-show="safeModuleData.safeShow.s3Show"
      >
        <div class="charttitle">
          <span class="titleName">{{
            isFullScreen ? "本周摄像头事件" : "安全统计"
          }}</span>
          <el-switch
            class="mySwitch"
            v-model="safeModuleData.isVideoTypePie"
            size="small"
            active-text="饼图"
            inactive-text="条形图"
            @change="handleSafeVideoChartTypeSwitch"
          />
        </div>
        <div id="safeVideoIndex"></div>
        <div class="footer" v-show="!isFullScreen">
          <i class="leftBtn" @click="handleSwitch('safe', 'left', 3)"></i>
          <span class="title">本周摄像头事件</span>
          <i class="rightBtn" @click="handleSwitch('safe', 'right', 3)"></i>
        </div>
      </div>
    </div>
    <div class="progressModule" v-show="progressModuleShow">
      <div class="leftContent">
        <div class="content">
          <img src="@/assets/images/index/progress.png" />
          <span>进度模块</span>
        </div>
      </div>
      <div
        :class="[
          'progressModuleItem',
          progressModuleData.progressShow.p1Show ? '' : 'hiddenChart',
        ]"
        v-show="progressModuleData.progressShow.p1Show"
      >
        <div class="charttitle">
          <span class="titleName">{{
            isFullScreen ? "进度本周指数趋势" : "进度统计"
          }}</span>
          <el-select
            v-model="progressModuleData.progressPeriod"
            class="m-2 mySelect"
            placeholder="Select"
            size="small"
          >
            <el-option
              v-for="item in progressModuleData.progressPeriodList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div id="progressIndex"></div>
        <div class="footer" v-show="!isFullScreen">
          <i class="leftBtn" @click="handleSwitch('progress', 'left', 1)"></i>
          <span class="title">进度本周指数趋势</span>
          <i class="rightBtn" @click="handleSwitch('progress', 'right', 1)"></i>
        </div>
      </div>
      <div
        :class="[
          'progressModuleItem',
          progressModuleData.progressShow.p2Show ? '' : 'hiddenChart',
        ]"
        v-show="progressModuleData.progressShow.p2Show"
      >
        <div class="charttitle">
          <span class="titleName">{{ isFullScreen ? "进度一览" : "进度统计" }}</span>
        </div>
        <div id="progressPrecentChart"></div>
        <div class="footer" v-show="!isFullScreen">
          <i class="leftBtn" @click="handleSwitch('progress', 'left', 2)"></i>
          <span class="title">进度一览</span>
          <i class="rightBtn" @click="handleSwitch('progress', 'right', 2)"></i>
        </div>
      </div>
      <div
        :class="[
          'progressModuleItem',
          progressModuleData.progressShow.p3Show ? '' : 'hiddenChart',
        ]"
        v-show="progressModuleData.progressShow.p3Show"
      >
        <div class="charttitle">
          <span class="titleName">{{ isFullScreen ? "工程最新进度" : "进度统计" }}</span>
        </div>
        <div id="progressAccidentIndex"></div>
        <div class="footer" v-show="!isFullScreen">
          <i class="leftBtn" @click="handleSwitch('progress', 'left', 3)"></i>
          <span class="title">工程最新进度</span>
          <i class="rightBtn" @click="handleSwitch('progress', 'right', 3)"></i>
        </div>
      </div>
    </div>
    <div class="environmentModule" v-show="environmentModuleShow">
      <div class="leftContent">
        <div class="content">
          <img src="@/assets/images/index/environment.png" />
          <span>环境模块</span>
        </div>
      </div>
      <div
        :class="[
          'environmentModuleItem',
          environmentModuleData.environmentShow.e1Show ? '' : 'hiddenChart',
        ]"
        v-show="environmentModuleData.environmentShow.e1Show"
      >
        <div class="charttitle">
          <span class="titleName">{{
            isFullScreen ? "环境本周指数趋势" : "环境统计"
          }}</span>
          <el-select
            v-model="environmentModuleData.environmentPeriod"
            class="m-2 mySelect"
            placeholder="Select"
            size="small"
          >
            <el-option
              v-for="item in environmentModuleData.environmentPeriodList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div id="environmentTrendIndex"></div>
        <div class="footer" v-show="!isFullScreen">
          <i class="leftBtn" @click="handleSwitch('environment', 'left', 1)"></i>
          <span class="title">环境本周指数趋势</span>
          <i class="rightBtn" @click="handleSwitch('environment', 'right', 1)"></i>
        </div>
      </div>
      <div
        :class="[
          'environmentModuleItem',
          environmentModuleData.environmentShow.e2Show ? '' : 'hiddenChart',
        ]"
        v-show="environmentModuleData.environmentShow.e2Show"
      >
        <div class="charttitle">
          <span class="titleName">{{
            isFullScreen ? "环境本周违规分布" : "环境统计"
          }}</span>
        </div>
        <div id="environmentAccidentIndex"></div>
        <div class="footer" v-show="!isFullScreen">
          <i class="leftBtn" @click="handleSwitch('environment', 'left', 2)"></i>
          <span class="title">环境本周违规分布</span>
          <i class="rightBtn" @click="handleSwitch('environment', 'right', 2)"></i>
        </div>
      </div>
      <div
        :class="[
          'environmentModuleItem',
          environmentModuleData.environmentShow.e3Show ? '' : 'hiddenChart',
        ]"
        v-show="environmentModuleData.environmentShow.e3Show"
      >
        <div class="charttitle">
          <span class="titleName">{{
            isFullScreen ? "环境扣分类型分布" : "环境统计"
          }}</span>
        </div>
        <div id="environmentVideoIndex"></div>
        <div class="footer" v-show="!isFullScreen">
          <i class="leftBtn" @click="handleSwitch('environment', 'left', 3)"></i>
          <span class="title">环境扣分类型分布</span>
          <i class="rightBtn" @click="handleSwitch('environment', 'right', 3)"></i>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.rightChart {
  width: 1600px;
  height: 100%;

  .menu {
    position: absolute;
    height: 30px;
    z-index: 100;

    img {
      width: 15px;
      height: 15px;
      padding: 10px;
      cursor: pointer;
    }
  }

  .safeModule {
    position: relative;
    width: 100%;
    background-color: white;
    transform: translateX(-25%);
    z-index: 99;
    overflow: hidden;

    .safeModuleItem {
      width: 25%;
      float: left;
    }
  }

  .progressModule {
    position: relative;
    width: 100%;
    background-color: white;
    transform: translateX(-25%);
    z-index: 99;
    overflow: hidden;

    .progressModuleItem {
      width: 25%;
      float: left;

      .progressTable {
        height: calc(33vh - 69px);
        overflow: auto;

        .floorBar {
          display: inline-flex;
          // position: absolute;
          bottom: 10px;
          flex-direction: column-reverse;
          width: 30px;
          height: calc(33vh - 69px);
          text-align: end;
          margin-bottom: 38px;
        }
      }

      .progressContent {
        display: inline-flex;
        bottom: 10px;
        width: calc(100% - 30px);
        flex-wrap: nowrap;
        overflow-x: scroll;

        .buildingItem {
          display: flex;
          flex-direction: column-reverse;
          margin: 0 15px;
        }
      }
    }
  }
}

.environmentModule {
  position: relative;
  width: 100%;
  background-color: white;
  transform: translateX(-25%);
  z-index: 99;
  overflow: hidden;

  .environmentModuleItem {
    width: 25%;
    float: left;
  }
}

.hiddenChart {
  opacity: 1;
}

.charttitle {
  position: relative;

  .titleName {
    display: inline-block;
    height: 22px;
    line-height: 22px;
    margin-left: 10px;
    padding-left: 5px;
    font-size: 15px;
    font-family: Source Han Sans SC;
    font-weight: 600;
    border-left: 3px solid #8f93f7;
  }

  .fastChange {
    position: absolute;
    top: 0px;
    right: 35px;
    z-index: 99999;

    .bar {
      display: inline-block;
      width: 22px;
      height: 22px;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-image: url("@/assets/images/report/zhu.png");
      cursor: pointer;

      &.active {
        background-image: url("@/assets/images/report/zhuA.png");
      }
    }

    .line {
      display: inline-block;
      width: 22px;
      height: 22px;
      margin-left: 13px;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-image: url("@/assets/images/report/zhe.png");
      cursor: pointer;

      &.active {
        background-image: url("@/assets/images/report/zheA.png");
      }
    }
  }
}

.footer {
  text-align: center;

  .leftBtn {
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("@/assets/images/index/left.png");
    cursor: pointer;
  }

  .title {
    display: inline-block;
    width: 140px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("@/assets/images/index/spanBg.png");
  }

  .rightBtn {
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("@/assets/images/index/right.png");
    cursor: pointer;
  }
}

.leftContent {
  width: 25%;
  z-index: 99;
  float: left;

  .content {
    text-align: center;
    margin-top: 116px;

    img {
      width: 50px;
      height: 50px;
    }

    span {
      padding-left: 20px;
      font-size: 18px;
      font-weight: 700;
    }
  }
}

.mySelect {
  position: absolute;
  width: 70px;
  height: 22px;
  right: 10%;
  top: 30px;
  line-height: 22px;
  z-index: 99;
}

.mySwitch {
  position: absolute;
  height: 22px;
  top: 38px;
  right: 5%;
  //padding-left: 30px;
  z-index: 99;
}

:deep(.el-tree) {
  display: inline-block;
  position: absolute;
}

:deep(.el-tree-node__children) {
  background-color: white;
}

:deep(.el-tree-node__content) {
  padding-left: 9px !important;
}

.safeTree {
  left: -7px;
}

.progressTree {
  left: 130px;
}

.environmentTree {
  left: 273px;
}

#safeTrendIndex {
  width: 100%;
  max-width: 390px;
  height: calc(33vh - 69px);
  margin: 0 auto;
}

#safeAccidentIndex {
  width: 100%;
  max-width: 390px;
  height: calc(33vh - 69px);
  margin: 0 auto;
}

#safeVideoIndex {
  width: 100%;
  max-width: 390px;
  height: calc(33vh - 69px);
  margin: 0 auto;
}

#progressIndex {
  width: 100%;
  max-width: 390px;
  height: calc(33vh - 69px);
  margin: 0 auto;
}

#progressPrecentChart {
  width: 100%;
  max-width: 390px;
  height: calc(33vh - 69px);
  margin: 0 auto;
}

#progressAccidentIndex {
  width: 100%;
  max-width: 390px;
  height: calc(33vh - 69px);
  margin: 0 auto;
}

#environmentTrendIndex {
  width: 100%;
  max-width: 390px;
  height: calc(33vh - 69px);
  margin: 0 auto;
}

#environmentAccidentIndex {
  width: 100%;
  max-width: 390px;
  height: calc(33vh - 69px);
  margin: 0 auto;
}

#environmentVideoIndex {
  width: 100%;
  max-width: 390px;
  height: calc(33vh - 69px);
  margin: 0 auto;
}

.colorSpan {
  display: inline-block;
  width: 30px;
  height: 15px;
  border-radius: 5px;
}

.progress0 {
  background-color: #80e7bf;
}

.progress1 {
  background-color: #fedb4c;
}

.progress2 {
  background-color: #f57861;
}

.progress3 {
  background-color: #e7eaed;
}
</style>
